<!--
 * @Description:
 * @Author BPF
 * @create 2021/12/5 16:58
 -->
<!--default-->
<script>
export default { name: 'demo' }
</script>

<!--setup-->
<script setup>
const props = defineProps({
  showEmpty: {
    type: Boolean,
    default: true
  },
  data: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  sortColumn: {
    // 以哪列排序
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['onSort'])

function onSort(thItem, thIndex) {
  if (thItem.sortable) {
    emit('onSort', thItem, thIndex)
  }
}
</script>

<!--render-->
<template>
  <table border="0" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th v-for="(thItem, thIndex) in props.columns" :key="thIndex" :style="thItem.style">
          <div :class="['table-cell', thItem.align && `table-cell--${thItem.align}`]" @click="onSort(thItem, thIndex)">
            <template v-if="thIndex.type == 'index'">
              {{ thItem.label || '序号' }}
            </template>
            <template v-else>
              {{ thItem.label }}
            </template>
            <template v-if="thItem.sortable">
              <div class="thead-sort">
                <i
                  :class="[
                    'iconfont-bpf-m icon-m-xiangxia1 fa-caret-up',
                    props.sortColumn.id == thItem._ID && props.sortColumn.sort == 1 && 'font-warning'
                  ]"
                ></i>
                <i
                  :class="[
                    'iconfont-bpf-m icon-m-xiangxia1 fa-caret-down',
                    props.sortColumn.id == thItem._ID && props.sortColumn.sort == -1 && 'font-warning'
                  ]"
                ></i>
              </div>
            </template>
          </div>
        </th>
      </tr>
    </thead>
    <tbody v-if="props.data.length">
      <tr v-for="(item, index) in props.data" :key="index">
        <td v-for="(thItem, thIndex) in columns" :key="thIndex" :rowspan="1" :colspan="1" :style="thItem.style">
          <div
            :class="['table-cell', thItem.align && `table-cell--${thItem.align}`]"
            @click.stop="
              () => {
                thItem.onClick && thItem.onClick({ $index: index, row: item })
              }
            "
          >
            <!-- 是插槽 -->
            <template v-if="thItem.slot">
              <slot v-bind="{ $index: index, row: item }"></slot>
            </template>
            <!-- 是序号 -->
            <template v-else-if="thItem.type == 'index'">
              {{ index + 1 }}
            </template>
            <!-- 是链接 -->
            <template v-else-if="thItem.type == 'link'">
              <span class="font-blue text-underline">
                {{ item[thItem.prop] }}
              </span>
            </template>
            <!-- 其他 -->
            <template v-else>
              {{ item[thItem.prop] }}
            </template>
          </div>
        </td>
      </tr>
    </tbody>

    <tbody v-else>
      <tr>
        <td :colspan="columns.length">
          <g-empty class="table-empty" v-if="props.showEmpty">数据为空</g-empty>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<!--style-->
<style scoped lang="less">
table {
  table-layout: fixed;
  border-collapse: separate;
  .font-blue {
    color: @primary-color;
  }
  .font-success {
    color: @success-color;
  }
  .font-error {
    color: @danger-color;
  }
  .font-warning {
    color: @warning-color;
  }
  .text-underline {
    text-decoration: underline;
  }
  tr {
    color: #333;
    td,
    th {
      .table-cell {
        line-height: 0.4rem;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: 0.2rem 0;
        word-break: break-all;
      }
      .table-cell--center {
        text-align: center;
        justify-content: center;
      }
      .table-cell--left {
        text-align: left;
        justify-content: flex-start;
      }
      .table-cell--right {
        text-align: right;
        justify-content: flex-end;
      }
    }
    th {
      position: relative;
      //color: @primary-color;
      font-weight: bold;
      //border-bottom: 1px solid #ddd;
      //white-space: nowrap;
      background-color: rgba(@primary-color, 0.84);
      //background-color: #c8cfee;
      color: #fff;
      //&:before {
      //  content: '';
      //  //background-color: @primary-color;
      //  //opacity: 0.2;
      //  background-color: #aab9f0;
      //  width: 100%;
      //  height: 100%;
      //  position: absolute;
      //  left: 0;
      //}
    }
  }
  tr:nth-child(even) {
    background: #eef1fc;
    //background-color: #b5cbde;
  }
  tr:nth-child(odd) {
    background: #fff;
  }
}

.thead-sort {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding: 0 0.04rem;
  height: 0.4rem;
  position: relative;
  width: 0.3rem;
  i {
    font-size: 0.24rem !important;
    position: absolute;
    display: inline-block;
    //width: 0.12rem;
  }
  i:nth-child(1) {
    top: 0.08rem;
    transform: scale(0.74);
  }
  i:nth-child(2) {
    transform: scale(0.74) rotate(180deg);
    bottom: 0.08rem;
  }
}

.table-empty {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
</style>
